<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div
    v-drag
    :style="{
       textAlign: 'center',
       marginTop: type == 1 ? '0' : `-${size / 2}px`,
       width: Number(size) < 100 ? '100px' : Number(size) + 'px',
       right: `${qrOffset}px`
    }"
    class="qr"
  >
    <div>
      <qrcode-vue ref="qrcode" :value="url" :size="size" level="H" />
      <img v-if="imageUrl" :src="imageUrl" alt="二维码图片" />
    </div>
    <div class="refresh" v-if="rate>0" @click="handleRefresh">刷新二维码(每{{ rate}}秒自动刷新)</div>
    <div class="tip">{{ tip }}</div>
  </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue'
import { convertHtmlByParam} from '@/framework-core/utils/util'

export default {
  name: 'JrQrcode',
  inject: ['getViewFormData'],
  props: ['column', 'value'],
  components: {
    QrcodeVue
  },
  data() {
    return {
      url: '',
      imageUrl:"",
      logoImg: '',
      rate:0,
      tip: '',
      type: 1 //显示方式
    };
  },
  computed: {
    url() {
      var url = this.column.url;
      if (this.column) {
        this.initLogo();
        var formData = {};
        if (this.getViewFormData) {
          formData = this.getViewFormData()
        }
        url = convertHtmlByParam(this.column.url, formData, this.$route.query);
      }
      setTimeout(() => {
        this.convertToImage();
      }, 1000);
      return url;
    },
    tip(){
      if(this.column) {
        var formData = {};
        if (this.getViewFormData) {
          formData = this.getViewFormData()
        }
        return convertHtmlByParam(this.column.tip, formData, this.$route.query);
      }
      return this.column.tip;
    },
    size() {
      if (this.column?.size && !isNaN(this.column.size)) {
        return  this.column.size;
        //return (Number(this.column.size) * document.body.offsetHeight) / 100
        // return _.floor(
        //         (Number(this.column.size) * document.body.offsetHeight) / 100
        // );
      }
      return 200;
    },
    qrOffset() {
      if (this.column?.wOffset) {
        return  (Number(this.column.wOffset) * document.body.offsetWidth) / 100
        // return _.floor(
        //         (Number(this.column.wOffset) * document.body.offsetWidth) / 100
        // );
      }
      return 0;
    }
  },

  beforeDestroy() {
    //this.scrollboadHandle && clearInterval(this.scrollboadHandle);
  },
  mounted() {
    this.setRate();
    if (this.column?.showType) {
      this.type = this.column?.showType;
    }
  },
  methods: {
    convertToImage() {
      const svg = this.$refs.qrcode.$el.querySelector('svg');
      if(!svg){
        return
      }
      const canvas = document.createElement('canvas');
      canvas.width = svg.clientWidth;
      canvas.height = svg.clientHeight;
      const ctx = canvas.getContext('2d');
      const data = (new XMLSerializer()).serializeToString(svg);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      const img = new Image();
      img.onload = () => {
        ctx.drawImage(img, 0, 0);
        this.imageUrl = canvas.toDataURL('image/png');
      };
      img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(data)));
    },
    initLogo() {
      if (this.logoImg) {
        let logo = new Image();
        logo.crossOrigin = 'Anonymous';
        logo.src = this.logoImg;
        logo.onload = () => {
          let container = this.$refs.qrcode.$el;
          //获取canvas
          let canvas = container.querySelector('canvas');
          let cxt = canvas.getContext('2d');
          const width = canvas.clientWidth;
          const height = canvas.clientHeight;
          //logo背景色
          cxt.fillStyle = '#ffffff';
          cxt.fillRect(
                  width * 0.5 - width * 0.25 * 0.5,
                  height * 0.5 - height * 0.25 * 0.5,
                  width * 0.25,
                  height * 0.25
          );
          //写入logo
          cxt.drawImage(
                  logo,
                  width * 0.5 - width * 0.25 * 0.5,
                  height * 0.5 - height * 0.25 * 0.5,
                  width * 0.25,
                  height * 0.25
          );

          container.appendChild(canvas);
        };
      }
    },
    handleRefresh() {
     // const { qrurl } = this.column;
     // if (qrurl) this.remoteSet(qrurl, this.viewFormData.modelData);
    },
    setRate() {
      const {url, rate} = this.column || {};
      // if (rate > 0) {
      //   this.scrollboadHandle = setInterval(() => {
      //     // this.remoteSet(qrurl, this.viewFormData.modelData);
      //   }, 1000 * rate);
      // }
    },
  }
};
</script>
<style lang="scss" scoped>
  .qr2 {
    background-color: #fff;
    border: 1px #eee solid;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 7px;
    left: 0 !important;
    top: 0 !important;
  }
  .qr {
    background-color: #fff;
    position: fixed;
    // right: 0;
    top: 50%;
    z-index: 9999;
    border: 1px #eee solid;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 7px;
    div {
      padding-top: 10px;
    }
    .refresh {
      cursor: pointer;
    }
    .tip {
      color: blue;
      font-size: 15px;
      font-weight: bold;
    }
  }
</style>
